<template>
  <div class="nav">
    <Breadcrumb>
      <BreadcrumbItem>系统配置</BreadcrumbItem>
      <BreadcrumbItem>集成设备</BreadcrumbItem>
      <BreadcrumbItem>列表</BreadcrumbItem>
    </Breadcrumb>
  </div>
  <div class="tab">
    <Tabs
      value="name1"
      :animated="false"
      style="padding-left: 10px; padding-right: 10px"
    >
      <TabPane label="打印机" name="dyj">
        <div class="zd">
          <vxe-grid v-bind="gridOptions1">
            <template #toolbar_buttons>
              <div class="a">
                <div class="a1">
                  <vxe-input
                    v-model="searchName"
                    style="width: 300px"
                    placeholder="请输入打印机名称"
                  ></vxe-input>
                  <vxe-button status="primary">搜索</vxe-button>
                </div>

                <div class="a2">
                  <vxe-button
                    style="
                      background-color: #945635;
                      color: aliceblue;
                      width: 88px;
                    "
                    >+ 新增</vxe-button
                  >
                </div>
              </div>
            </template>
          </vxe-grid>
        </div>
      </TabPane>
      <TabPane label="移动终端" name="ydzd">
        <div class="zd">
          <vxe-grid v-bind="gridOptions2">
            <template #toolbar_buttons>
              <div class="a">
                <div class="a1">
                  <vxe-input
                    v-model="searchName"
                    style="width: 300px"
                    placeholder="请输入手持终端名称"
                  ></vxe-input>
                  <vxe-button status="primary">搜索</vxe-button>
                </div>

                <div class="a2">
                  <vxe-button
                    style="
                      background-color: #945635;
                      color: aliceblue;
                      width: 88px;
                    "
                    >+ 新增</vxe-button
                  >
                </div>
              </div>
            </template>
          </vxe-grid>
        </div>
      </TabPane>
      <TabPane label="工作站终端" name="gzzzd">
        <div class="zd">
          <vxe-grid v-bind="gridOptions3">
            <template #toolbar_buttons>
              <div class="a">
                <div class="a1">
                  <vxe-input
                    v-model="searchName"
                    style="width: 300px"
                    placeholder="请输入工作站名称"
                  ></vxe-input>
                  <vxe-button status="primary">搜索</vxe-button>
                </div>

                <div class="a2">
                  <vxe-button
                    style="
                      background-color: #945635;
                      color: aliceblue;
                      width: 88px;
                    "
                    >+ 新增</vxe-button
                  >
                </div>
              </div>
            </template>
          </vxe-grid>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>
  
  <script setup>
import { ref, reactive } from "vue";
const gridOptions1 = reactive({
  border: true,
  keepSource: true,
  showOverflow: true,

  id: "toolbar_demo_2",
  loading: false,
  columnConfig: {
    resizable: true,
  },
  customConfig: {
    storage: true,
  },
  editConfig: {
    trigger: "click",
    mode: "row",
    showStatus: true,
  },
  toolbarConfig: {
    custom: true,
    slots: {
      buttons: "toolbar_buttons",
    },
  },
  columns: [
    { type: "checkbox", width: 70, align: "center" },
    { field: "id", title: "序号", width: 70, align: "center" },
    { field: "name", title: "采购标题", width: 184 },
    { field: "prescription", title: "采购时间", width: 180 },
    { field: "diagnosis", title: "供应商", align: "center" },
    { field: "Department", title: "供应商负责人", width: 100, align: "center" },
    { field: "state", title: "供应商送货人", width: 120, align: "center" },
    { field: "Interventions", title: "状态", width: 120, align: "center" },
    { field: "operate", title: "操作", width: 150, align: "center" },
  ],
  data: [
    {
      id: 1,
      name: "陈文婷",
      prescription: "321",
      diagnosis: "肺炎：肺部感染，通常由",
      Department: "--",
      state: 28,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 2,
      name: "吕致盈",
      prescription: "322",
      diagnosis: "胃溃疡：胃黏膜下层或",
      Department: "--",
      state: 22,
      Interventions: "Guangzhou",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 3,
      name: "陈文婷",
      prescription: "325",
      diagnosis: "高血压：血压持续升高",
      Department: "--",
      state: 32,
      Interventions: "Shanghai",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 4,
      name: "陈文婷",
      prescription: "327",
      diagnosis: "1",
      Department: "中药部门",
      state: 23,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
  ],
});

const gridOptions2 = reactive({
  border: true,
  keepSource: true,
  showOverflow: true,

  id: "toolbar_demo_2",
  loading: false,
  columnConfig: {
    resizable: true,
  },
  customConfig: {
    storage: true,
  },
  editConfig: {
    trigger: "click",
    mode: "row",
    showStatus: true,
  },
  toolbarConfig: {
    custom: true,
    slots: {
      buttons: "toolbar_buttons",
    },
  },
  columns: [
    { field: "id", title: "序号", align: "center" },
    { field: "name", title: "入库标题" },
    { field: "prescription", title: "入库时间" },
    { field: "diagnosis", title: "入库人" },
    { field: "Department", title: "状态", width: 100, align: "center" },
    { field: "state", title: "操作", width: 120, align: "center" },
  ],
  data: [
    {
      id: 1,
      name: "陈文婷",
      prescription: "321",
      diagnosis: "肺炎：肺部感染，通常由",
      Department: "--",
      state: 28,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 2,
      name: "吕致盈",
      prescription: "322",
      diagnosis: "胃溃疡：胃黏膜下层或",
      Department: "--",
      state: 22,
      Interventions: "Guangzhou",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 3,
      name: "陈文婷",
      prescription: "325",
      diagnosis: "高血压：血压持续升高",
      Department: "--",
      state: 32,
      Interventions: "Shanghai",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 4,
      name: "陈文婷",
      prescription: "327",
      diagnosis: "1",
      Department: "中药部门",
      state: 23,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
  ],
});

const gridOptions3 = reactive({
  border: true,
  keepSource: true,
  showOverflow: true,

  id: "toolbar_demo_2",
  loading: false,
  columnConfig: {
    resizable: true,
  },
  customConfig: {
    storage: true,
  },
  editConfig: {
    trigger: "click",
    mode: "row",
    showStatus: true,
  },
  toolbarConfig: {
    custom: true,
    slots: {
      buttons: "toolbar_buttons",
    },
  },
  columns: [
    { field: "id", title: "序号", align: "center" },
    { field: "name", title: "申领标题" },
    { field: "prescription", title: "移库时间" },
    { field: "diagnosis", title: "申领库房" },
    { field: "Department", title: "申领人", width: 100, align: "center" },
    { field: "state", title: "移库库房", width: 120, align: "center" },
    { field: "state", title: "移库人", width: 120, align: "center" },
    { field: "state", title: "状态", width: 120, align: "center" },
    { field: "state", title: "操作", width: 120, align: "center" },
  ],
  data: [
    {
      id: 1,
      name: "陈文婷",
      prescription: "321",
      diagnosis: "肺炎：肺部感染，通常由",
      Department: "--",
      state: 28,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 2,
      name: "吕致盈",
      prescription: "322",
      diagnosis: "胃溃疡：胃黏膜下层或",
      Department: "--",
      state: 22,
      Interventions: "Guangzhou",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 3,
      name: "陈文婷",
      prescription: "325",
      diagnosis: "高血压：血压持续升高",
      Department: "--",
      state: 32,
      Interventions: "Shanghai",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 4,
      name: "陈文婷",
      prescription: "327",
      diagnosis: "1",
      Department: "中药部门",
      state: 23,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
  ],
});
</script>
  
  <style scoped>
.nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  font-size: 20px;
}

.a {
  display: flex;
  flex-direction: column;
}
.a1 {
  padding-bottom: 10px;
}
.zd {
  background-color: #ffffff;
  height: 100vh;
  border-right: 20px solid #ffffff;
  border-left: 20px solid #ffffff;
  border-top: 5px solid #ffffff;
}
</style>